<template>
  
<div class="order-details">
    <div class="order-details-tips">
        <template v-if="tipStruc">
            <i :class="['icon', 'iconfont', tipStruc.icon]"></i>
            <span>{{ tipStruc.text }}</span>
        </template>
    </div>
    <div v-if="order" class="order-details-boxt">
        <div class="info-group">
            <div class="lable">卖家</div>
            <div class="value">{{ seller.name }}</div>
        </div>
        <div class="info-group">
            <div class="lable">品种</div>
            <div class="value">{{ order.order_items[0].product_name }}</div>
        </div>
        <div class="info-group">
            <div class="lable">规格</div>
            <div class="value">{{ order.order_items[0].product_spec }}</div>
        </div>
        <div class="info-group">
            <div class="lable">产地</div>
            <div class="value">{{ order.order_items[0].product_address }}</div>
        </div>
    </div>

    <div v-if="order" class="order-details-boxb">
        <div class="info-group">
            <div class="lable">采购数量</div>
            <div class="value">{{ order.order_items[0].product_count }}</div>
        </div>
        <div class="info-group">
            <div class="lable">商品单价</div>
            <div class="value">{{ order.order_items[0].product_price }}元 / {{ order.order_items[0].product_unit }}</div>
        </div>
        <div class="info-group">
            <div class="lable">贷款金额</div>
            <div class="value">{{ order.order_amount }} 元</div>
        </div>
        <div class="order-details-boxbf">
            应付金额：
            <span class="amount">¥ {{ order.order_amount }}</span>
        </div>
    </div>

    <div v-if="order" class="order-details-boxt minfo">
        <div class="info-group">
            <div class="lable">收货信息</div>
            <div class="value">
                <span>{{ order.contact_name }}  {{ order.contact_tel }}</span>
                <br>
                <span>{{ order.address }}</span>
            </div>
        </div>
        <div class="info-group">
            <div class="lable">卖家留言</div>
            <div class="value">{{ order.buyer_message }}</div>
        </div>
        <div class="order-details-boxbf">
            <p>订单编号：{{ order.order_no }}</p>
            <p>订单创建时间：{{ order.created_at }}</p>
        </div>
    </div>

    <div v-if="order" class="ftdbar">
        <template  v-if="order.status === 'paid'" >
            <a @click="delivering" href="javascript:void(0)" class="ftdbar-item" style="background-color: #ff5722; color: #fff">
                发货确认
            </a>
            <a class="ftdbar-item" :href="'tel:' + order.contact_tel" style="background-color: #04a25c; color: #fff" >
                打电话
            </a>
        </template>

        <template v-if="order.status === 'unconfirmed'" >
            <a class="ftdbar-item" :href="'tel:' + order.contact_tel">
                <i class="icon iconfont icon-tel" style="margin-right: 5px;" ></i> 打电话
            </a>
            <a @click="cancleOrder" class="ftdbar-item" href="javascript:void(0)" style="background-color: #ff5722; color: #fff">
                取消订单
            </a>
            <a @click="confirm" class="ftdbar-item" :href="'tel:' + order.contact_tel" style="background-color: #04a25c; color: #fff" >
                确认订单
            </a>
        </template>

        <template v-if="order.status === 'unpaid'|| order.status === 'cancelled'">
            <a class="ftdbar-item" :href="'tel:' + order.contact_tel" style="background-color: #04a25c; color: #fff" >
                <i class="icon iconfont icon-tel" style="margin-right: 5px;" ></i>
                打电话
            </a>
        </template>

        <template v-if="order.status === 'completed' || order.status === 'delivering'">
            <a class="ftdbar-item" :href="'tel:' + order.contact_tel" style="background-color: #04a25c; color: #fff" >
                打电话
            </a>
        </template>
    </div>

</div>

</template>

<script>
    export default {
        props: ['id'],
        data() {
            return {
                seller: null,
                order: null,
                tipStruc: null
            }
        },
        created() {
            this.getDetail()
        },
        methods: {
            // 获取订单详细信息
            getDetail() {
                axios('/member/shop/order/' + this.id, {
                    params: {
                        type: 'sold'
                    }
                }).then(res => {
                    res = res.data;
                    if (res.status === 'success') {
                        this.order = res.data
                        this.seller = res.data.user
                        this.orderTips()
                    }
                }).catch( err => {
                    console.log(err)
                })
            },
            // 取消订单
            cancleOrder() {
                axios.post('/order/cancle/' + this.id, {
                    'type' : 'sold',
                }).then(res => {
                    if(res.data.status === 'success') {
                        // window.location.reload();
                    }
                }).catch( err => {
                    console.log(err)
                })
            },
            delOrder() {
                axios.delete('/order/' + this.id  ).then( res => {
                        if (res.data.status === 'success') {
                            window.location.href = "/member/sold";
                        }
                    }
                ).catch( err => {
                    console.log(err)
                })
            },
            confirm() {
                axios.post('/order/' + this.id + '/confirm'  ).then( res => {
                        if (res.data.status === 'success') {
                            window.location.reload();
                        }
                    }
                ).catch( err => {
                    console.log(err)
                })
            },
            // 发货确认
            delivering() {
                axios.post('/order/' + this.id + '/delivering'  ).then( res => {
                        if (res.data.status === 'success') {
                            window.location.reload();
                        }
                    }
                ).catch( err => {
                    console.log(err)
                }) 
            },
            // 订单状态提示
            orderTips() {
                let status = this.order.status
                switch (true) {
                    case status === 'unconfirmed':
                        this.tipStruc = {
                            icon: 'icon-waiting',
                            text: '等待确认，确认之后买家才能支付'
                        }
                        break;
                
                    case status === 'unpaid':
                        this.tipStruc = {
                            icon: '',
                            text: '等待买家支付'
                        }
                        break;

                    case status === 'paid':
                        this.tipStruc = {
                            icon: '',
                            text: '待发货'
                        }
                        break;

                    case status === 'delivering':
                        this.tipStruc = {
                            icon: 'icon-daifahuo',
                            text: '待收货'
                        }
                        break;


                    case status === 'completed':
                        this.tipStruc = {
                            icon: '',
                            text: '已完成'
                        }
                        break;

                    case status === 'cancelled':
                        this.tipStruc = {
                            icon: '',
                            text: '交易已关闭'
                        }
                        break;

                    default:
                        break;
                }
            }

        },
        filters: {
        }
    }
</script>

<style lang="scss" scoped>
    .ftdbar {
        a {
            color: #333;
        }
    }
</style>
